<script setup>
import axios from '../request.js';
import {onMounted, ref} from "vue";
import {ElMessage, ElDrawer} from "element-plus";
import router from "@/router.js";

const username = ref()
const balance = ref()

const inputValue = ref({
  inputBalance: ""
});
const options = ref(['3', '5', '10', '20', '50', '100', '200', '1000']);
const paymentMethod = ref()

const HistoryData = ref()
const table = ref(false)

onMounted(() => {
  getMessage();
  getHistory();
})

const getMessage = () => {
  axios.get("/recharge/balance").then(resp => {
    username.value = resp.message
    balance.value = resp.date
  })
}

//点击选择充值数值
const handleButtonClick = (option) => {
  inputValue.value.inputBalance = option;
}

//点击确定充值
const ok = () => {
  if (inputValue.value.inputBalance === "") {
    ElMessage({
      message: '请输入充值金额',
      showClose: true,
      grouping: false,
      type: 'warning',
    })
    return;
  }

  if (!/^[0-9]*$/.test(inputValue.value.inputBalance) && !/^(0|([1-9][0-9]*))(\.[\d]+)?$/.test(inputValue.value.inputBalance) || inputValue.value.inputBalance == 0) {
    ElMessage({
      message: '请输入正确金额',
      showClose: true,
      grouping: false,
      type: 'error',
    })
    return;
  }

  if (paymentMethod.value === undefined) {
    ElMessage({
      message: '请选择支付方式',
      showClose: true,
      grouping: false,
    })
    return;
  }

// 生成随机数的函数
  const generateRandomNumber = () => {
    // 获取当前时间戳
    const timestamp = new Date().getTime();
    // 使用时间戳作为种子生成随机数
    return Math.floor(Math.random() * timestamp);
  }

// 调用函数生成随机数
  const randomValue = generateRandomNumber();

  if (paymentMethod.value === "支付宝") {
    window.location.href = `http://localhost:8090/alipay/pay?subject=${username.value}&traceNo=${randomValue}&totalAmount=${inputValue.value.inputBalance}`;
    return;
  }

  if (paymentMethod.value === "微信支付") {
    ElMessage({
      message: '暂不支持微信支付,请使用支付宝',
      showClose: true,
      grouping: false,
      type: 'warning',
    })
  }
}

// 表单验证规则
const inputValueRules = ref({
  inputBalance: [
    {required: true, message: "请输入金额", trigger: "blur"},
    {pattern: /^(0|([1-9][0-9]*))(\.[\d]+)?$/, message: "请输入非负整数或小数", trigger: "blur"},
    {validator: (rule, value) => value >= 0, message: "充值金额应该大于0", trigger: "blur"}
  ],
});

const getHistory = () => {
  axios.get("/recharge/getRechargeRecord").then(resp => {
    username.value = resp.message
    HistoryData.value = resp.date.reverse(); // 将历史记录逆序排列
  })
}

const close = () => {
  router.push({path: "/index"}); // 使用router.push进行跳转
};
</script>


<template>
  <div class="recharge-center">

    <div class="tips">
      <div class="title">
        <img src="../../public/SVG/充值中心.svg" alt="支付宝" class="svg"/>
        <a>网咖充值中心</a>
      </div>
      <ul>
        <li>注意：充值金额无法退回，请谨慎充值！！！！！</li>
        <li>1、充值金额仅可在本网咖使用，对外一律无法使用。</li>
        <li>2、充值金额与人民币换算为1:1,你可以选择微信或者支付宝进行支付，每次充值不限数额。</li>
      </ul>
    </div>

    <div class="recharge-card">
      <div class="avatar">
        <img
            src="https://th.bing.com/th/id/R.fd81516a06ce33c15b194494272fa6e9?rik=XAfnJ6A9NFvAyA&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f2022053117%2fivhiashhpu1.jpg&ehk=Yi2aDhWvd0rnBKl1xloJy8F1RfGd8%2bcC75k4ff8dVXk%3d&risl=&pid=ImgRaw&r=0">
      </div>

      <div class="message">
        <span>充值用户：{{ username }}</span>
        <span>总计余额：{{ balance }}元</span>
      </div>
      <router-link to="/Points" class="recharge-button">积分兑换</router-link>
      <router-link to="/CustomerService" class="recharge-button">常见问题</router-link>
    </div>

    <div class="recharge-details">
      <div class="input-container">
        <el-form
            ref="formRef"
            style="max-width: 800px"
            :model="inputValue"
            label-width="auto"
            class="demo-ruleForm"
        >
          <el-form-item
              prop="inputBalance"
              :rules="inputValueRules.inputBalance"
          >
            <el-input
                class="input"
                v-model="inputValue.inputBalance"
                type="text"
                autocomplete="off"
                placeholder="请输入金额"
            />
          </el-form-item>

          <el-button class="option-button" type="success" plain v-for="option in options" :key="option"
                     @click="handleButtonClick(option)">{{ option }}
          </el-button>
        </el-form>
      </div>

      <div class="choose-pay">支付方式：
        <el-radio-group v-model="paymentMethod">
          <el-radio class="check" value="支付宝" size="large" border>
            <img src="../../public/SVG/支付宝支付.svg" alt="支付宝" class="svg"/>
            <a>支付宝</a>
          </el-radio>
          <el-radio class="check1 check" value="微信支付" size="large" border>
            <img src="../../public/SVG/微信.svg" alt="支付宝" class="svg"/>
            <a>微信支付</a>
          </el-radio>
        </el-radio-group>
      </div>

      <div class="reveal-balance">
        <a>应付金额：</a>
        <a class="reveal-balance-color">{{ inputValue.inputBalance }} 元</a>
      </div>
    </div>

    <div class="bottom">
      <button @click="ok">确定支付</button>
      <el-button class="buttons" text @click="table = true">余额历史</el-button>
      <el-drawer
          v-model="table"
          title="充值历史!"
          direction="rtl"
          size="60%"
      >
        <div class="query">
          <router-link to="/CustomerService" class="query-button">对订单有疑问?</router-link>
        </div>

        <el-table :data="HistoryData">
          <el-table-column prop="id" label="订单号" width="200"/>
          <el-table-column label="用户名" width="200">{{ username }}</el-table-column>
          <el-table-column prop="balanceRecord" label="充值/积分兑换" width="200"/>
          <el-table-column prop="balance" label="余额" width="200"/>
          <el-table-column prop="rechargeTime" label="时间" width="200"/>
          <el-table-column prop="status" label="状态" width="150"/>
        </el-table>

      </el-drawer>
      <button @click="close">回到主页</button>
    </div>

  </div>
</template>

<style scoped>
.recharge-center {
  width: 60%;
  height: 710px;
  margin: 0 auto; /* 居中显示 */
  border: 1px solid darkslategray;
}

.tips {
  font-size: 15px;
  height: 130px;
  background-color: #21add4;
  margin: 0 auto; /* 居中显示 */
  color: white;
}

.title {
  padding: 7px 0 4px 11px;
  font-size: 20px;
}

.tips ul, .tips ul li {
  font-size: 17px;
  margin: 5px 0 5px 8px;
  padding: 0;
  list-style: none;

}

.recharge-card {
  max-width: 92.2%;
  height: 80px;
  padding: 2px;
  margin: 35px auto 0 auto;
  border-radius: 5px;
  background-color: #f3cf9f;
  position: relative; /* 成为相对定位的容器 */
  display: flex;
  justify-content: space-around;
}


.avatar {
  margin: 0 0 0 20px;
  padding: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden; /* 隐藏 .avatar 中超出部分的内容 */
}

.avatar img {
  width: 100%;
  height: auto;

}

.message {
  font-size: 21px;
  text-align: center;
  line-height: 80px; /* 设置 .message 的 line-height 控制垂直居中 */
}

.message span {
  margin: 0 30px 0 0;
}

.recharge-button {
  font-size: 18px;
  background-color: #f3cf9f;
  color: black;
  text-decoration: none;
  border-radius: 50%;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  border-left: 1px solid burlywood;
  border-right: 1px solid burlywood;
  text-align: center;
  line-height: 80px;
}

.recharge-button:hover {
  background-color: burlywood;
}

p {
  text-align: center;
  line-height: 70px;
}

.recharge-details {
  max-width: 840px;
  margin: 0 auto; /* 居中显示 */
  padding: 20px;
  border-radius: 8px;
}

.input-container {
  margin: 30px 0 26px 0;
}

.input {
  width: 535px;
}

.option-button {
  width: 50px;
  margin: 30px 50px 0 0;
}

.check {
  width: 160px;
  height: 50px;
  margin: 20px 35px 20px 0;
}

.check1 {
  --el-color-primary: #19c738;
}

.check img, .check a {
  vertical-align: middle;
  font-size: 20px;
  margin: 0 0 0 5px;
}

.choose-pay {
  font-size: 18px;
}

.svg {
  width: 30px;
  height: 25px;
}

.reveal-balance {
  margin: 22px 0 22px 0;
  font-size: 18px;
}

.reveal-balance-color {
  font-size: 25px;
  color: red;
}

.bottom {
  border-top: 1px solid black;
  display: flex;
}

.bottom button {
  margin: 22px 130px 0 38px;
  height: 40px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.bottom button:hover {
  background-color: #169b0f !important;
}

:deep(.el-drawer__header){
  margin-bottom: 10px;
}

:deep(.el-drawer__header>:first-child){
  font-size: 20px;
}

:deep(.el-table .cell ){
  margin: 5px 0 12px 0;

}
.query{
  height: 24px;
  width: 104px;
  border: none;
  border-radius: 4px;
  background-color: rgba(46, 225, 61, 0.91);
}

.query:hover {
  background-color: #b62f5e;
}

.query-button{
  font-size: 16px;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

</style>

